@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-gallery {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: @z-index-gallery;

    &__swiper {
        width: 100%;
        height: 100%;
    }

    &__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &__img {
        flex: none;
        width: 100%;
        height: 100%;
    }

    &__remark {
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
        color: white;
        text-align: center;
        padding: 15px;
        font-size: 14px;
        z-index: 10;
        opacity: 0;
        transition: opacity .3s ease .5s;

        &--active {
            opacity: 1;
        }
    }

    &__opr {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #0D0D0D;
        color: #FFF;
        line-height: 60px;
        text-align: center;
    }

    &__del {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 18px 0;

        > image {
            width: 24px;
            height: 24px;
        }
    }

    &__icon {
        background-image: url();
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        color: #FFF;
        width: 24px;
        height: 24px;
    }
}
